<template>
  <div class="toastBox">
    <i class="iconfont" :class="type==='success'?'icon-success':type==='warning'?'icon-warning':'icon-danger'"></i>
    <span>{{ msg }}</span>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data(){
    return{
  
    }
  },
  computed:{
    ...mapState({
      msg:(state)=>{
       return state.toastStatus.msg
      },
      // icon的状态，，，success，warning，danger
      type:(state)=>{
       return state.toastStatus.type
      }
    })
  }
}
</script>

<style scoped lang="less">
.toastBox{
    position: fixed;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    height: 40px;
    background-color: white;
    line-height: 40px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 0 10px white;
    padding: 0 20px;
}
</style>
